<template>
  <div class="layout-container">
    <div style="margin-bottom: 10px;">
      <el-input size="large" v-model="post.title" placeholder="请输入文章标题">
        <template #prepend>文章标题</template>
      </el-input>
    </div>
    <v-md-editor v-model="post.content" height="100%"></v-md-editor>
    <div style="margin-top: 10px;">
    </div>
    <el-button @click="handlePush()" size="large" type="primary">发布</el-button>
    <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show"/>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import {LayerInterface} from "@/components/layer/index.vue";
import hljs from 'highlight.js'
import Layer from "./layer.vue";

VMdEditor.use(githubTheme, {
  Hljs: hljs,
});

// 弹窗控制器
const layer: LayerInterface = reactive({
  show: false,
  title: "发布",
  showButton: false,
});

const post = ref({
  postId: null,
  title: "",
  content: ""
})

const handlePush = () => {
  // layer.row = data
  layer.show = true
}

const saveDraftForm = () => {

}

const getTableData = () => {

}
</script>

<style lang="scss" scoped>
* {
  text-align: left;
}

.layout-container {
  background: 0;
}
</style>